.img-info {
  margin-bottom: 24px;
}

.modal-box {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .toggle-icon {
    font-size: 32px;
  }
  .disabled-icon {
    color: #eee;
  }

  .img-box {
    width: 100%;
    height: 600px;
    margin: 0 32px;
    border: 1px solid #eee;
    box-sizing: border-box;
    display: flex;
    position: relative;

    .img {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;

      img, canvas {
        display: block;
        max-width: 100%;
        max-height: 100%;
        -o-object-fit: contain;
        object-fit: contain;
      }
    }

    .img-loading {
      margin: auto;
    }
  }
}

.label-list {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  width: 176px;
  padding: 20px;
  color: #fff;
  background: rgba(0, 0, 0, .6);
  line-height: 1em;
  word-break: break-all;

  ul {
    list-style: initial;

    .label-list-li {
      display: list-item;
      text-align: -webkit-match-parent;
      margin-top: 20px;
    }
  }
}

.ocr-box {
  display: flex;
  justify-content: space-around;
  width: 100%;

  .auto-width-img-box {
    flex: 1;
    margin: 0;
  }
  
  .txt-box {
    border: 1px solid #eee;
    margin-left: 24px;
    height: 600px;
    overflow: auto;
    width: 200px;
    pre {
      padding: 24px;
      width: max-content;
    }
  }
}